<div class="container mt-2">
  <div class="row">
    <div class="col-md-6" [formGroup]="clientData">
      <h2>Уважаемый клиент</h2>
      <span>Вы обратились к нам с проблемой - <b>{{callTypeValue}}</b> </span>
      <span> стоимость выезда специалиста составляет - <b>25 000 р.</b> </span>
      <p>Для поиска специалиста необходимо ввести данные:</p>
        <mat-form-field class="full-width">
          <mat-label>Фамилия</mat-label>
          <input matInput type="text"
                 required
                  formControlName="familyName">
          <mat-icon matSuffix>person</mat-icon>
          @if (clientData.controls.familyName.hasError('required')) {
            <mat-error>Поле фамилия должно быть заполнено</mat-error>
          }
        </mat-form-field>
        <mat-form-field class="full-width">
          <mat-label>Имя</mat-label>
          <input matInput type="text"  formControlName="firstName">
          <mat-icon matSuffix>person</mat-icon>
          @if (clientData.controls.firstName.hasError('required')) {
            <mat-error>Поле Имя должно быть заполнено</mat-error>
          }
        </mat-form-field>
          <mat-form-field class="full-width">
          <mat-label>Отчество</mat-label>
          <mat-icon matSuffix>person</mat-icon>
          <input matInput type="text" formControlName="middleName">
        </mat-form-field>
        <mat-form-field class="full-width">
          <mat-label>Телефон</mat-label>
          <span matTextPrefix>+7 &nbsp;</span>
          <input matInput type="text" formControlName="phoneNumber"
          mask="(000) 000-00-00">
          <mat-icon matSuffix>call</mat-icon>
          @if (clientData.controls.phoneNumber.hasError('required')) {
            <mat-error>Поле Телефон должно быть заполнено</mat-error>
          }
        </mat-form-field>
        <mat-form-field class="full-width">
          <mat-label>Адрес</mat-label>
          <input matInput placeholder="Где вы сейчас находитесь"
                 (change)="getResult()"
                 (keyup)="getClientAddress($event)"
                 [(ngModel)]="address" formControlName="address">
          <mat-icon matSuffix>home</mat-icon>
          @if (clientData.controls.address.hasError('required')) {
            <mat-error>Поле Адрес должно быть заполнено</mat-error>
          }
        </mat-form-field>
      <div *ngIf="isNotGeoData" class="alert alert-warning" role="alert">
        Мы не смогли определить ваше местоположение, уточните адрес
      </div>
        <p>{{address}}</p>
        <mat-form-field class="full-width">
          <mat-label>Опишите задачу</mat-label>
          <mat-icon matSuffix>task</mat-icon>
          <textarea matInput formControlName="description"></textarea>
        </mat-form-field>

        <button mat-flat-button color="primary"
                [disabled]="!clientData.valid"
                (click)="findLawyer()">Поиск</button>
    </div>
    <div class="col-md-6">
      <h2>По вашему запросу найден специалист</h2>
      <div *ngIf="viewLawyer" class="row">
        <mat-card class="example-card" appearance="outlined">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{ specialist.name }}</mat-card-title>
            <mat-card-subtitle>Специалист</mat-card-subtitle>
          </mat-card-header>
          <img mat-card-image  [src]="specialist.img"  alt="{{specialist.name}}">
          <mat-card-content>
            <p>
              {{specialist.description}}
            </p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button>Перейти к оплате</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  </div>
</div>
